const path = require('path');
const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = defineConfig({
  transpileDependencies: true,
  // 配置方式1
  configureWebpack: {
    resolve: {
      alias: {
        '@': '/src',
        components: '@/components'
      }
    },
    plugins: [
      AutoImport.default({
        resolvers: [ElementPlusResolver({ importStyle: false })]
      }),
      Components.default({
        resolvers: [ElementPlusResolver({ importStyle: false })]
      })
    ]
  },
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://192.168.1.9:8888',
        // target: 'http://123.207.32.32:8000/',
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      }
    }
  }
  // 配置方式2
  // configureWebpack: (config) => {
  //   config.resolve.alias = {
  //     '@': path.resolve(__dirname, 'src'),
  //     components: '@/components'
  //   };
  // }
  // 配置方式3
  // chainWebpack: (config) => {
  //   config.resolve.alias
  //     .set('@', path.resolve(__dirname, 'src'))
  //     .set('components', path.resolve(__dirname, 'src/components'));
  // },
  // configureWebpack: {
  //   plugins: [
  //     AutoImport.default({
  //       resolvers: [ElementPlusResolver()]
  //     }),
  //     Components.default({
  //       resolvers: [ElementPlusResolver()]
  //     })
  //   ]
  // }
});
